(function () {
	"use strict";
	const usernameBox = document.querySelector('.username'),
		signout = document.querySelector('.signout'),
		menuBox = document.querySelector('.menuBox'),
		iframeBox = document.querySelector('.iframeBox'),
		forceUpdate = document.querySelector('.forceUpdate');
	let userInfo = null,
		hashRoute = {},
		menuLinks = null;

	// HASH路由的实现
	const menuLinkActive = () => {
		let hash = location.hash.replace('#', '');
		if (!menuLinks) return;
		if (!hash) {
			menuLinks[0].className = 'active';
			return;
		}
		menuLinks.forEach(link => {
			link.className = link.getAttribute('hash') === hash ? 'active' : '';
		});
	};
	menuBox.onclick = function (ev) {
		let target = ev.target,
			hash;
		if (target.tagName === 'A') {
			// 点击A修改首页面的HASH值
			hash = target.getAttribute('hash');
			location.hash = hash ? hash : '';
			menuLinkActive();
		}
	};
	window.onhashchange = menuLinkActive;

	// 绑定个人信息
	const bindInfo = () => {
		usernameBox.innerHTML = `您好：${userInfo.name}`;
	};

	// 退出登录
	signout.onclick = function () {
		let flag = confirm('您确定要退出吗？');
		if (flag) {
			utils.storage.remove('tk');
			utils.storage.remove('departmentList');
			utils.storage.remove('jobList');
			location.href = 'login.html';
		}
	};
	forceUpdate.onclick = function () {
		utils.storage.remove('departmentList');
		utils.storage.remove('jobList');
		location.reload();
	};

	// 权限校验
	const validate = () => {
		let { power } = userInfo,
			str = ``;
		power = power.split('|');
		// 客户管理
		str += `<div class="itemBox" text="客户管理">
			<h3>
				<i class="iconfont icon-kehuguanli"></i>
				客户管理
			</h3>
			<nav class="item">
				<a href="page/customerlist.html?lx=my" target="iframeBox" hash="customerlistMy">我的客户</a>
				${power.includes('customerall') ?
				`<a href="page/customerlist.html?lx=all" target="iframeBox" hash="customerlistAll">全部客户</a>` : ``}
				<a href="page/customeradd.html" target="iframeBox" hash="customeradd">新增客户</a>
			</nav>
		</div>`;
		// 员工管理
		if (power.includes('userhandle')) {
			str += `<div class="itemBox" text="员工管理">
				<h3>
					<i class="iconfont icon-yuangong"></i>
					员工管理
				</h3>
				<nav class="item">
					<a href="page/userlist.html" target="iframeBox" hash="userlist">员工列表</a>
					<a href="page/useradd.html" target="iframeBox" hash="useradd">新增员工</a>
				</nav>
			</div>`;
		}
		// 部门管理
		if (power.includes('departhandle')) {
			str += `<div class="itemBox" text="部门管理">
				<h3>
					<i class="iconfont icon-guanliyuan"></i>
					部门管理
				</h3>
				<nav class="item">
					<a href="page/departmentlist.html" target="iframeBox" hash="departmentlist">部门列表</a>
					<a href="page/departmentadd.html" target="iframeBox" hash="departmentadd">新增部门</a>
				</nav>
			</div>`;
		}
		// 职务管理
		if (power.includes('jobhandle')) {
			str += `<div class="itemBox" text="职务管理">
				<h3>
					<i class="iconfont icon-zhiwuguanli"></i>
					职务管理
				</h3>
				<nav class="item">
					<a href="page/joblist.html" target="iframeBox" hash="joblist">职务列表</a>
					<a href="page/jobadd.html" target="iframeBox" hash="jobadd">新增职务</a>
				</nav>
			</div>`;
		}
		menuBox.innerHTML = str;

		// 获取所有的A，构建HASH对照表 “哈希:嵌入子页面的地址”
		menuLinks = Array.from(menuBox.querySelectorAll('a'));
		menuLinks.forEach(link => {
			let hash = link.getAttribute('hash'),
				href = link.href;
			hashRoute[hash] = href;
		});

		// 根据当前页面的HASH值，控制IFRAME嵌入的页面
		let hash = location.hash,
			href;
		hash = hash.replace('#', '');
		href = hashRoute[hash];
		iframeBox.src = href ? href : 'page/customerlist.html?lx=my';

		// 控制A的选中样式
		menuLinkActive();
	};

	// 进入首页的第一件事情：校验是否登录
	const checkLogin = async () => {
		try {
			let { code, info } = await http.get('/user/info');
			if (+code === 0) {
				// 已经登录
				userInfo = info;
				return;
			}
		} catch (_) { }
		// 未登录
		alert('您还未登录，请先登录！');
		location.href = 'login.html';
	};
	checkLogin().then(() => {
		// 确保登录后，再去处理其它事情
		bindInfo();
		validate();
	});
})();
